/**
 * Created by xmgong on 2017/12/15.
 */

import React from 'react';
import {
    View, 
    Text, 
    StyleSheet
} from 'react-native';
import theme from '../../config/theme';

const steps1 = [
    {
        name: '编辑基本信息'
    }, {
        name: '编辑基本属性'
    }, {
        name: '编辑规格'
    }, {
        name: '编辑详情'
    }
];

const steps2 = [
    {
        name: '填写基本信息'
    }, {
        name: '上传身份证照'
    }, {
        name: '上传营业执照'
    }
];

export default class StepInfo extends React.Component {

    constructor(props) {
        super(props);
        this.curStepIndex = props.index;
        this.step = props.step;
        this.backgroundColor = props.backgroundColor;
    }

    rendPoint(index, state, txt) {
        let pointView;
        let point;
        let normalStyle = undefined;
        let selectedStyle = undefined;
        switch (this.step) {
            case 1: {
                normalStyle = stepInfoStyles.circularPointNormal;
                selectedStyle = stepInfoStyles.circularPointSelected;
                break;
            }
            case 2: {
                normalStyle = stepInfoStyles.rhombicPointNormal;
                selectedStyle = stepInfoStyles.rhombicPointSelected;
                break;
            }
            default: {
                normalStyle = stepInfoStyles.circularPointNormal;
                selectedStyle = stepInfoStyles.circularPointSelected;
                break;
            }
        }
        let PointNor = (
            <View style={normalStyle}>
                <Text style={{fontSize: 11, color: 'white', transform: [{rotate: '-45deg'}]}}>{txt + 1}</Text>
            </View>);
        let PointSelected = (
            <View style={selectedStyle}>
                <Text style={{fontSize: 11, color: 'white', transform: [{rotate: '-45deg'}]}}>{txt + 1}</Text>
            </View>);

        if (state) {
            point = PointSelected;
        } else {
            point = PointNor;
        }

        // if (index == 0) {
            // 开始
            pointView = (<View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
                <View style={{flex: 1, height: 1, marginRight: 5, backgroundColor: 'rgba(155,155,155,0.5)'}}/>
                {point}
                <View style={{flex: 1, height: 1, marginLeft: 5, backgroundColor: 'rgba(155,155,155,0.5)'}}/>
            </View>);
        // } else if (index == 2) {
        //     //最后
        //     pointView = (<View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
        //         <View style={{flex: 1, height: 1, backgroundColor: 'rgba(155,155,155,0.1)'}}/>
        //         {point}
        //         <View style={{flex: 1, height: 1, backgroundColor: 'rgba(155,155,155,0.1)'}}/>
        //     </View>);
        // } else {
        //     //中间
        //     pointView = (<View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
        //         <View style={{flex: 1, height: 1, backgroundColor: 'rgba(155,155,155,0.1)'}}/>
        //         {point}
        //         <View style={{flex: 1, height: 1, backgroundColor: 'rgba(155,155,155,0.1)'}}/>
        //     </View>);
        // }

        return pointView;
    }

    render() {
        let self = this;
        let stepTitle = [];
        let stepPoint = [];
        let state = 0;
        let index = 0;
        let steps = undefined;
        let marginTop = 5;
        switch (self.step) {
            case 1: {
                steps = steps1;
                break;
            }
            case 2: {
                steps = steps2;
                marginTop = 10;
                break;
            }
            default: {
                steps = steps1;
                break;
            }
        }
        steps.map((item) => {
            index = steps.indexOf(item);
            if (index <= self.curStepIndex) {
                state = true;
                stepTitle.push(<View style={{flex: 1, alignItems: 'center'}}>
                    <Text style={{fontSize: 13, color: 'black'}}>{item.name}</Text>
                </View>);
            } else {
                state = false;
                stepTitle.push(<View style={{flex: 1, alignItems: 'center'}}>
                    <Text style={{fontSize: 13, color: 'gray'}}>{item.name}</Text>
                </View>);
            }
            
            if (index == 0) {
                stepPoint.push(this.rendPoint(0, state, index));
            } else if (index == steps.length - 1) {
                stepPoint.push(this.rendPoint(2, state, index));
            } else {
                stepPoint.push(this.rendPoint(1, state, index));
            }
        });

        return (
            <View style={{
                flexDirection: 'column',
                backgroundColor: this.backgroundColor,
                paddingTop: 5, paddingBottom: 15, paddingLeft: 10, paddingRight: 10
            }}>
                <View style={{flexDirection: 'row', marginBottom:5, marginTop:5}}>
                    {stepPoint}
                </View>
                <View style={{flexDirection: 'row', marginTop: marginTop}}>
                    {stepTitle}
                </View>

            </View>
        );
    }

}

const stepInfoStyles = StyleSheet.create({
    circularPointNormal: {
        width: 26,
        height: 26,
        borderRadius: 13,
        backgroundColor: 'rgba(155,155,155,1)',
        transform: [{rotate: '45deg'}],
        marginLeft: 5,
        marginRight: 5,
        alignItems: 'center',
        justifyContent: 'center'
    },
    circularPointSelected: {
        width: 26,
        height: 26,
        borderRadius: 13,
        backgroundColor: theme.maincolor,
        transform: [{rotate: '45deg'}],
        marginLeft: 5,
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 5
    },
    rhombicPointNormal: {
        width: 26,
        height: 26,
        transform: [{rotate: '45deg'}],
        backgroundColor: 'rgba(155,155,155,1)',
        marginLeft: 5,
        marginRight: 5,
        alignItems: 'center',
        justifyContent: 'center'
    },
    rhombicPointSelected: {
        width: 26,
        height: 26,
        backgroundColor: theme.maincolor,
        transform: [{rotate: '45deg'}],
        marginLeft: 5,
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 5
    }
});

